<!--
 * @Author: zshawk1982
 * @Date: 2023-05-22 16:09:48
 * @LastEditTime: 2023-05-23 11:39:40
 * @LastEditors: zshawk1982
 * @Description: 
 * @FilePath: \routerDemo\src\views\UserView.vue
-->
<!--
 * @Author: zshawk1982
 * @Date: 2023-05-22 16:09:48
 * @LastEditTime: 2023-05-23 10:43:46
 * @LastEditors: zshawk1982
 * @Description: 
 * @FilePath: \routerDemo\src\views\UserView.vue
-->

<template>
  <div class="container">
    <router-view v-slot="{ Component }">
      <transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutRight" mode="out-in">
        <component :is="Component">
        </component>
      </transition>
      </router-view>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { RouterView } from 'vue-router';
onMounted(() => {
  window.localStorage.setItem('userlist', JSON.stringify([
    { username: 'zs', age: 21, email: 'zs@qq.com', phone: '18983127881' },
    { username: 'lishi', age: 21, email: 'lishi@qq.com', phone: '18983127882' },
    { username: 'wangwu', age: 21, email: 'wangwu@qq.com', phone: '18983127883' },
    { username: 'zhao6', age: 21, email: 'zhao6@qq.com', phone: '18983127884' },
  ]))
})
</script>
<style scoped>
.container{
  flex: 1;
}
</style>
